<script setup>
import { onMounted, ref } from 'vue'
import { getVehicleDetailsApi } from '@/api/vehicle'
import { passAuditApi, rejectAuditApi, getNameApi } from '@/api/audit'
import { useRoute, useRouter } from 'vue-router'
import { ZoomIn } from '@element-plus/icons-vue'
import { getCategoryNameApi } from '@/api/category'
const route = useRoute()
const router = useRouter()

// 详细图片列表
const fileList = ref([])

// 车辆分类
const vehicleCategoryName = ref('')
// 品牌
const brandName = ref('')
// 学校名
const campusOrShopName = ref('')

// 提交给后端的表单数据
const dataForm = ref({
  name: '',
  brand: '',
  registerDate: '',
  version: '',
  color: '',
  emissionStandard: '',
  vehicleMarket: {
    currentPrice: '',
    telNum: '',
    city: '',
    mileage: '',
    frontPic: '',
    campusOrShopId: '',
    tradeAddr: '',
    mainPictures: '',
    leaveMessage: '',
    vehicleCategoryId: '',
    brandId: ''
  }
})
const setFormData = async () => {
  const res = await getVehicleDetailsApi(route.params.id)
  dataForm.value = res.data
  // 回显文件列表
  JSON.parse(dataForm.value.vehicleMarket.mainPictures).forEach((e) => {
    fileList.value.push({ url: e })
  })

  // 根据分类id解析分类名
  const res1 = await getCategoryNameApi(
    dataForm.value.vehicleMarket.vehicleCategoryId
  )
  vehicleCategoryName.value = res1.data
  if (dataForm.value.vehicleMarket.brandId) {
    const res2 = await getCategoryNameApi(dataForm.value.vehicleMarket.brandId)
    brandName.value = res2.data
  }

  // 如果交易地址是学校则解析学校名
  if (dataForm.value.vehicleMarket.campusOrShopId) {
    const res3 = await getNameApi(dataForm.value.vehicleMarket.campusOrShopId)
    campusOrShopName.value = res3.data
  }
}

// 图片放大镜
const dialogImg = ref('')
const dialogShow = ref(false)
const openBigImg = (url) => {
  dialogShow.value = true
  dialogImg.value = url
}

// 通过审批
const passAudit = async () => {
  await passAuditApi(route.params.id)
  ElMessage.success('操作成功')
  router.replace('/audit')
}

const rejectDialog = ref(false)
const auditAdvice = ref('')
const rejectAudit = async () => {
  await rejectAuditApi(route.params.id, auditAdvice.value)
  ElMessage.success('操作成功')
  router.replace('/audit')
}

onMounted(() => setFormData())
</script>
<template>
  <div class="container">
    <div class="right">
      <div style="margin-bottom: 30px; width: 750px">
        <el-descriptions size="large" :column="2" title="分类/品牌">
          <el-descriptions-item label="分类 :">
            {{ vehicleCategoryName }}
          </el-descriptions-item>
          <el-descriptions-item label="品牌 :">
            {{ brandName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div style="margin-bottom: 30px">
        <el-descriptions :column="3" size="large" title="基本信息">
          <el-descriptions-item label="车辆名称 :">{{
            dataForm.name
          }}</el-descriptions-item>
          <el-descriptions-item label="&emsp;品牌名 :">{{
            dataForm.brand
          }}</el-descriptions-item>
          <el-descriptions-item label="配置版本 :">
            {{ dataForm.version }}
          </el-descriptions-item>
          <el-descriptions-item label="购买时间 :">{{
            dataForm.brand
          }}</el-descriptions-item>
          <el-descriptions-item label="车身颜色 :">
            <el-tag size="small">{{ dataForm.color }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="排放标准 :">
            {{ dataForm.emissionStandard }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div style="margin-bottom: 30px">
        <el-descriptions size="large" border title="营销信息">
          <el-descriptions-item width="150px" label="价&emsp;&emsp;格">
            {{ dataForm.vehicleMarket.currentPrice }}
          </el-descriptions-item>
          <el-descriptions-item width="170px" label="联系电话">
            {{ dataForm.vehicleMarket.telNum }}
          </el-descriptions-item>

          <el-descriptions-item label="备注/留言">
            {{ dataForm.vehicleMarket.leaveMessage }}
          </el-descriptions-item>
          <el-descriptions-item label="表显里程">
            {{ dataForm.vehicleMarket.mileage }}
          </el-descriptions-item>
          <el-descriptions-item label="所在城市">
            {{ dataForm.vehicleMarket.city }}
          </el-descriptions-item>
          <el-descriptions-item label="交易地点/学校">
            {{ dataForm.vehicleMarket.tradeAddr || campusOrShopName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-form label-width="100px" label-position="right">
        <div id="session4" class="header-desc">
          <span>车辆照片</span>
        </div>
        <el-form-item label="封面照片 :">
          <div style="position: relative; top: 10px; margin-bottom: 20px">
            <img class="my-image" :src="dataForm.vehicleMarket.frontPic" />
            <span class="overlay">
              <el-icon
                @click.prevent="openBigImg(dataForm.vehicleMarket.frontPic)"
                class="zoomIcon"
                ><ZoomIn
              /></el-icon>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="详细照片 :">
          <ul style="display: flex; flex-wrap: wrap">
            <li
              v-for="item in fileList"
              :key="item.url"
              style="position: relative; margin: 10px 20px 20px 0"
            >
              <img class="my-image" :src="item.url" />
              <span class="overlay">
                <el-icon @click.prevent="openBigImg(item.url)" class="zoomIcon"
                  ><ZoomIn
                /></el-icon>
              </span>
            </li>
          </ul>
        </el-form-item>
      </el-form>
      <div style="margin-left: 400px">
        <el-button
          size="large"
          color="#626aef"
          type="primary"
          plain
          @click="passAudit"
          >通过</el-button
        >
        <el-button
          size="large"
          type="warning"
          plain
          @click="rejectDialog = true"
          >驳回</el-button
        >
      </div>
    </div>
  </div>
  <el-dialog title="图片放大" v-model="dialogShow" width="800">
    <img :src="dialogImg" alt="" />
  </el-dialog>
  <el-dialog title="审核意见" v-model="rejectDialog" width="600">
    <el-input
      type="textarea"
      :rows="4"
      v-model="auditAdvice"
      placeholder="请输入驳回原因及建议"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="rejectDialog = false">取消</el-button>
        <el-button type="primary" @click="rejectAudit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.my-image {
  position: relative;
  max-width: 300px;
  height: auto;
}

.overlay {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* 遮罩层颜色及透明度 */
  opacity: 0;
  transition: opacity 0.3s;
  &:hover {
    opacity: 1;
  }
}

.zoomIcon {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0.7;
  cursor: pointer;
  font-size: 30px;
}
.header-desc {
  padding: 15px 0;
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: 700;
}
.container {
  display: flex;
  padding: 10px 0;

  .right {
    padding: 50px;
    background-color: #fff;
    flex: 1;
    margin-left: 15px;
    padding-bottom: 100px;
  }
}

.avatar-uploader {
  .avatar {
    max-width: 250px;
    height: auto;
  }
  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  &:hover {
    border-color: var(--el-color-primary);
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
